"use client"

import { useEffect } from "react"
import { Track } from "@/types/admin"
import { useAdminStore } from "@/lib/store"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import * as z from "zod"

const formSchema = z.object({
  name: z.string().min(1, "股道名称不能为空"),
  code: z.string().min(1, "股道编号不能为空"),
  type: z.enum(["检修库", "停车线", "试车线"], {
    required_error: "请选择股道类型",
  }),
  status: z.enum(["空闲", "占用", "维护中"], {
    required_error: "请选择股道状态",
  }),
})

type FormValues = z.infer<typeof formSchema>

interface TrackDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  track?: Track
}

export function TrackDialog({
  open,
  onOpenChange,
  track,
}: TrackDialogProps) {
  const { addTrack, updateTrack } = useAdminStore()
  const isEditing = !!track

  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: track?.name || "",
      code: track?.code || "",
      type: track?.type || "检修库",
      status: track?.status || "空闲",
    },
  })

  useEffect(() => {
    if (track) {
      form.reset({
        name: track.name,
        code: track.code,
        type: track.type,
        status: track.status,
      })
    } else {
      form.reset({
        name: "",
        code: "",
        type: "检修库",
        status: "空闲",
      })
    }
  }, [track, form])

  const onSubmit = (values: FormValues) => {
    const trackData = {
      name: values.name,
      code: values.code,
      type: values.type,
      status: values.status,
    }

    if (isEditing && track) {
      updateTrack(track.id, trackData)
    } else {
      addTrack(trackData)
    }

    onOpenChange(false)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>{isEditing ? "编辑股道" : "新增股道"}</DialogTitle>
          <DialogDescription>
            {isEditing
              ? "修改股道信息，点击保存确认更改。"
              : "添加新股道，填写完成后点击创建。"}
          </DialogDescription>
        </DialogHeader>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
            <FormField
              control={form.control}
              name="name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>股道名称</FormLabel>
                  <FormControl>
                    <Input placeholder="输入股道名称" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="code"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>股道编号</FormLabel>
                  <FormControl>
                    <Input placeholder="输入股道编号" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="type"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>股道类型</FormLabel>
                  <Select
                    onValueChange={field.onChange}
                    value={field.value}
                  >
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="选择股道类型" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="检修库">检修库</SelectItem>
                      <SelectItem value="停车线">停车线</SelectItem>
                      <SelectItem value="试车线">试车线</SelectItem>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="status"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>股道状态</FormLabel>
                  <Select
                    onValueChange={field.onChange}
                    value={field.value}
                  >
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="选择股道状态" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectItem value="空闲">空闲</SelectItem>
                      <SelectItem value="占用">占用</SelectItem>
                      <SelectItem value="维护中">维护中</SelectItem>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />

            <DialogFooter>
              <Button type="submit">
                {isEditing ? "保存" : "创建"}
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
} 